<style rel="stylesheet/scss" lang="scss" scoped>
	.flow-box{
		width: 100%;
		height: 100%;
		display: flex;
		overflow: auto;
		
		flex-direction: column;
		.flow-box_ul{
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			-webkit-margin-before: 0em;
			-webkit-margin-after: 0em;
			>li{
				width: 15%;
				display: flex;
				font-size: 14px;
				flex-direction: column;
				height: 40px;
				align-items: center;
				margin:  10px;
				justify-content: center;
				border: 1px solid #E5E5E5;
			}
		}
		.ch-box{
			width: 100%;
			height: 100%;
			flex: 1;
			padding: 20px;
			overflow: auto;
			border: 1px solid #E5E5E5;
		}
	}
</style>
<template>
	<div class="flow-box">
		<ul class="flow-box_ul" v-if="info">
			<li>
				<span>总交易金额</span>
				<span>{{info.totalAmount}}</span>
			</li>
			<li>
				<span>总退款金额</span>
				<span>{{info.refundAmount}}</span>
			</li>
			<li>
				<span>余额</span>
				<span>{{info.balanceAmount}}</span>
			</li>
			<li>
				<span>总交易笔数</span>
				<span>{{info.totalNum}}</span>
			</li>
			<li>
				<span>总退款笔数</span>
				<span>{{info.refundNum}}</span>
			</li>
			<li>
				<span>总成交笔数</span>
				<span>{{info.num}}</span>
			</li>
			<li>
				<span>昨日总交易金额</span>
				<span>{{info.yesterdayTotalAmount}}</span>
			</li>
			<li>
				<span>昨日总退款金额</span>
				<span>{{info.yesterdayRefundAmount}}</span>
			</li>
			<li>
				<span>昨日余额</span>
				<span>{{info.yesterdayBalanceAmount}}</span>
			</li>
			<li>
				<span>昨日交易笔数</span>
				<span>{{info.yesterdayTotalNum}}</span>
			</li>
			<li>
				<span>昨日退款笔数</span>
				<span>{{info.yesterdayRefundNum}}</span>
			</li>
			<li>
				<span>昨日成交笔数</span>
				<span>{{info.yesterdayNum}}</span>
			</li>
		</ul>
		<div class="ch-box">
			<div style="font-size:16px;">交易走势</div>
			<div style="overflow:hidden;" v-if="data">
				<schart
				style="margin-top:-30px"
				:canvasId="canvasId"
				:type="type"
				:width='width'
				:height="height"
				:data="data"
				:options="options">
				</schart>
			</div>
		</div>
	</div>
</template>

<script>
	import Schart from "vue-schart";
	import {
		getToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	export default {
		data() {
			return {
				info: null,
				canvasId: "myCanvas",
				type: "line",
				width: 1000,
				height: 350,
				data: null,
				options: {
					title: ''
				}
			}
		},
		created() {
			// 初始化数据
			this._initData()
			// 获取走势图
			this._getTrend()
			this.width = document.body.clientWidth -400
			console.log(document.body.clientWidth)
		},
		methods: {
			_getTrend() {
				this.$ajax( {
					api: 'merchant/transaction/trend',
					params: {
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.data = res.data
					}
				}).catch(err => {
					console.log(err)
					this.$message({
						type:'error',
						message: err.message
					})
				})
			},
			_initData() {
				this.$ajax({
					api: 'merchant/transaction/account',
					params: {
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.info = res.data
					}
				}).catch(err => {
					this.$message({
						type:'error',
						message: err.message
					})
				})
			}
		},
		components: {
			Schart
		}
	}
</script>